<template>
  <div id="detail">
    <navbar class="navbar">
      <div slot="left" class="left11" @click="goback">＜</div>
      <div slot="middle">
        <span
          v-for="(item, index) in title"
          :key="index"
          @click="btnclick(index)"
          :class="index === currentindex ? 'active' : ''"
          >{{ item }}</span
        >
      </div>
    </navbar>

    <scroll class="content1" @scroll1="backtop" :probetype="3" ref="scroll">
      <swiper :banner="banners" class="detail_banners"></swiper>

      <detailgoodsinfo
        :goodstitle="goodstitle"
        :oldPrice="oldPrice"
        :price="price"
        :discountDesc="discountDesc"
        :discountBgColor="discountBgColor"
        :columns="columns"
        :services="services"
      ></detailgoodsinfo>

      <detailshopinfo
        :shopLogo="shopLogo"
        :name="name"
        :cSells="cSells"
        :cGoods="cGoods"
        :score="score"
        :shopUrl="shopUrl"
      ></detailshopinfo>

      <detailgoodsdesc
        :detailImage="detailImage"
        :key1="key"
        :desc="desc"
      ></detailgoodsdesc>
      <detailgoodsparm
        :set="set"
        :rule="rule"
        :keyy="keyy"
        ref="detail_goodsparm"
      ></detailgoodsparm>

      <detailgoodscomment
        :cRate="cRate"
        :content="content"
        :images="images"
        :style1="style"
        :user1="user1"
        :created="created"
        ref="detail_goodscomment"
      ></detailgoodscomment>

      <div class="recommend" ref="recommend">推荐商品</div>
      <detailrecommend :goods="goods"> </detailrecommend>
    </scroll>
    <detailbottomnavbar @addcar="addcars"></detailbottomnavbar>
    <!-- @click.native用于在父组件中监听子组件的点击事件,如果用@click是无法监听到子组件的点击事件的 -->
    <gotop v-show="isShow" @click.native="gotopclick"></gotop>
  </div>
</template>

<script>
import navbar from "components/common/navbar/Navbar.vue";
import { getdetailinfo, getrecommend } from "../../network/detail_request";
import swiper from "components/common/swiper/swiper_detail.vue";
import detailgoodsinfo from "./detail_components/detail_goodsinfo.vue";
import detailshopinfo from "./detail_components/detail_shopinfo.vue";
import scroll from "components/common/scroll/better_scroll.vue";
import detailgoodsdesc from "./detail_components/detail_goodsdesc.vue";
import detailgoodsparm from "./detail_components/detail_goodsparm.vue";
import detailgoodscomment from "./detail_components/detail_goodscomment.vue";
import detailrecommend from "components/content/goods/goodslist.vue";
import gotop from "../../components/content/backtop.vue";
import detailbottomnavbar from "./detail_components/detail_bottomnavbar.vue";
import { detailbacktop } from "../../common/mixin";
import { mapActions } from "vuex";
export default {
  // 组件名称
  name: "detail", // 组件参数 接收来自父组件的数据
  props: {}, // 局部注册的组件
  components: {
    navbar,
    swiper,
    detailgoodsinfo,
    detailshopinfo,
    scroll,
    detailgoodsdesc,
    detailgoodsparm,
    detailgoodscomment,
    detailrecommend,
    gotop,
    detailbottomnavbar,
  }, // 组件状态值
  data() {
    return {
      // isShow: false,
      iid: null,
      currentindex: 0,
      title: ["商品", "参数", "评论", "推荐"],
      banners: [],
      goodstitle: null,
      oldPrice: null,
      price: null,
      discountDesc: null,
      discountBgColor: null,
      columns: null,
      services: null,
      shopLogo: null,
      name: null,
      cSells: null,
      cGoods: null,
      score: null,
      shopUrl: null,
      detailImage: null,
      key: null,
      desc: null,
      set: null,
      rule: null,
      keyy: null,
      cRate: null,
      canExplain: null,
      content: null,
      images: null,
      style: null,
      user1: null,
      created: null,
      goods: null,
      topY: [],
      savey: 0,
      lowNowPrice: null,
    };
  },
  methods: {
    // 把actions里面的方法映射到此组件,这样可以把此方法当做此组件的一个方法
    ...mapActions(["addproduct"]),
    //  回退按钮功能
    goback() {
      this.$router.go(-1);
    },
    // 点击navbar滚动到不同的主题
    btnclick(index) {
      this.$refs.scroll.bscroll.scrollTo(0, -this.topY[index], 0);
      this.currentindex = index;
    },
    // 详情页滚动到不同位置显示不同的主题,navbar变换颜色    this.$refs.detail_goodscomment.$el拿到的就是detail_goodscomment组件里最外层的元素
    backtop(position) {
      this.isShow = -position.y > 626;
      if (-position.y >= this.$refs.recommend.offsetTop) {
        this.currentindex = 3;
        return;
      } else if (-position.y >= this.$refs.detail_goodscomment.$el.offsetTop) {
        this.currentindex = 2;
        return;
      } else if (-position.y >= this.$refs.detail_goodsparm.$el.offsetTop) {
        this.currentindex = 1;
        return;
      } else if (-position.y <= this.$refs.detail_goodsparm.$el.offsetTop) {
        this.currentindex = 0;
        return;
      }
    },
    // 点击加入购物车把商品添加到vuex(store)
    addcars() {
      const product = {};
      product.image = this.banners[0];
      product.title = this.goodstitle;
      product.desc = this.desc;
      product.lowNowPrice = this.lowNowPrice;
      product.id = this.iid;

      // 发送添加到购物车actions事件
      // this.$store.dispatch("addproduct", product).then((res) => {
      //   console.log(res);
      // });
      // 发送添加到购物车actions事件(另一种写法)
      this.addproduct(product).then((res) => {
        console.log(res);
      });
    },
  },
  // 混入,提取不同组件中的相同代码进行导入
  mixins: [detailbacktop],
  created() {
    // 获取详情页商品信息
    this.iid = this.$route.params.id;
    getdetailinfo(this.iid).then((res) => {
      this.banners = res.data.result.itemInfo.topImages;
      this.discountDesc = res.data.result.itemInfo.discountDesc;
      this.discountBgColor = res.data.result.itemInfo.discountBgColor;
      this.price = res.data.result.itemInfo.price;
      this.oldPrice = res.data.result.itemInfo.oldPrice;
      this.lowNowPrice = res.data.result.itemInfo.lowNowPrice;
      this.goodstitle = res.data.result.itemInfo.title;
      this.columns = res.data.result.columns;
      this.services = res.data.result.shopInfo.services;
      this.shopLogo = res.data.result.shopInfo.shopLogo;
      this.name = res.data.result.shopInfo.name;
      this.cSells = res.data.result.shopInfo.cSells;
      this.cGoods = res.data.result.shopInfo.cGoods;
      this.score = res.data.result.shopInfo.score;
      this.shopUrl = res.data.result.shopInfo.shopUrl;
      this.detailImage = res.data.result.detailInfo.detailImage[0].list;
      this.key = res.data.result.detailInfo.detailImage[0].key;
      this.desc = res.data.result.detailInfo.desc;
      this.set = res.data.result.itemParams.info.set;
      this.keyy = res.data.result.itemParams.info.key;
      this.rule = res.data.result.itemParams.rule.tables[0];
      if (res.data.result.rate.cRate != 0) {
        this.content = res.data.result.rate.list[0].content;
        this.images = res.data.result.rate.list[0].images;
        this.style = res.data.result.rate.list[0].style;
        this.user1 = res.data.result.rate.list[0].user;
        this.created = res.data.result.rate.list[0].created;
      }
    });

    // 获取详情页推荐商品信息
    getrecommend().then((res) => {
      this.goods = res.data.data.list;
    });
  },
  // 数据更新时在默认topy中追加不同主体对应的offsetTop值
  updated() {
    this.topY = [];
    this.topY.push(0);
    this.topY.push(this.$refs.detail_goodsparm.$el.offsetTop);
    this.topY.push(this.$refs.detail_goodscomment.$el.offsetTop);
    this.topY.push(this.$refs.recommend.offsetTop);
  },
};
</script>
<style scoped>
#detail span {
  font-size: 15px;
  margin: 0 8px;
}
#detail {
  background-color: #fff;
  position: relative;
  z-index: 8888;
}
.left11 {
  font-size: 40px;
  font-weight: 200;
}

.active {
  color: palevioletred;
}
.navbar {
  background-color: #fff;
}

.detail_banners {
  margin-top: 45px;
}
.content1 {
  height: calc(100vh - 44px - 49px);
}
.recommend {
  font-size: 16px;
  padding: 20px 0 20px 15px;
}
</style>